import React, { FC, useEffect } from 'react';
import { Carousel } from 'antd';
import styles from './banner.less';
import { connect, IndexModelState, ConnectProps } from 'umi';

interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}

const Banner: FC<PageProps> = (props: any) => {
  const { bannerList = [] } = props.index;
  console.log(bannerList);
  let getData = () => {
    props.dispatch({
      type: 'index/getBannerList',
      payload: {
        type: '0',
      },
    });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <Carousel>
        {bannerList.map((data: any, index: number) => (
          <div key={index}>
            <div
              className={styles.carouselItem}
              style={{
                backgroundImage: 'url(' + data.imageUrl + ')',
              }}
            >
              <img className={styles.img} src={data.imageUrl} />
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  Banner,
);
